<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getUserList, addUserRequestApi, updataUserRequestApi, deleteUserRequestApi } from '@/api/user'
import { ElMessage } from 'element-plus'
import Page from '@/components/page/Page.vue'
const username = ref('')
const id = ref(0)
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const updataDialog = ref(false)
const addDialog = ref(false)
const deleletDialog = ref(false)
const addFormRef = ref()
const updataFormRef = ref()
const addForm = reactive({
    username: '',
    password: '',
    isAdmin: null,
    phone: ''
})
const updataForm = reactive({
    id: null,
    username: '',
    password: '',
    isAdmin: null,
    phone: ''
})


// 方法区
const pageChange = (size, num) => {
    console.log(size, num)
    pageSize.value = size
    pageNum.value = num
    gettableData()
}
const gettableData = async () => {
    const res = await getUserList(username.value, pageNum.value, pageSize.value)
    tableData.value = res.data.rows
    total.value = res.data.total
    console.log(res.data.total)
}
//打开修改对话框，并且填充表单
const openUpdataDialog = (row) => {
    console.log(row);
    updataDialog.value = true
    updataForm.id = row.id
    updataForm.username = row.username
    updataForm.password = row.password + ""
    updataForm.isAdmin = row.isAdmin
    updataForm.phone = row.phone
}
//打开删除对话框
const openDeleteDialog = (userId) => {

    deleletDialog.value = true
    id.value = userId


}

//关闭添加对话框
//关闭修改对话框
const outUpdataDialog = () => {
    updataDialog.value = false
    updataForm.username = ''
    updataForm.password = ''
    updataForm.isAdmin = null
    updataForm.phone = ''
}
//关闭添加对话框
const outAddDialog = () => {
    addDialog.value = false
    addForm.username = ''
    addForm.password = ''
    addForm.isAdmin = null
    addForm.phone = ''
}

//添加用户请求
const addUserRequest = async () => {
    addFormRef.value.validate(async (valid) => {
        if (valid) {
            const res = await addUserRequestApi(addForm)
            res.code == '1' ? ElMessage.success('添加成功') : ElMessage.error('添加失败')
            outAddDialog()
            gettableData();

        } else {
            console.log('error submit!')
            return false
        }
    })
}

//修改用户请求
const updataUserRequest = async () => {
    console.log(updataForm);
    await updataFormRef.value.validate()
    const res = await updataUserRequestApi(updataForm)
    res.code == '1' ? ElMessage.success('修改成功') : ElMessage.error('修改失败')
    gettableData();
    updataDialog.value = false
    updataForm = {
        id: null,
        username: '',
        password: '',
        isAdmin: null,
        phone: ''
    }
}

//删除用户请求
const deleletUserRequest = async () => {
    const res = await deleteUserRequestApi(id.value)
    res.code == '1' ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
    gettableData()
    deleletDialog.value = false

}

//表单验证规则
const addRules = ref({
    username: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
    ],
    isAdmin: [
        { required: true, message: '请选择身份', trigger: 'change' }
    ],
    phone: [
        { required: true, message: '请输入电话', trigger: 'blur' },
        { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ]
})

onMounted(async () => {
    gettableData()
})

</script>

<template>
    <div style="padding: 20px;background-color: aliceblue; width: 95%;margin: 0 auto;">
        <div>
            姓名：<el-input v-model="username" style="width: 200px;margin-right: 30px;" placeholder="请输入姓名" /><el-button
                type="primary" @click="gettableData">查询</el-button> <el-button type="danger"
                @click="addDialog = true">添加</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;height: 550px;margin-top: 40px;margin-bottom: 40px;">
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="password" label="密码" width="180" />
            <el-table-column prop="phone" label="电话" width="180" />
            <el-table-column prop="isAdmin" label="身份" width="180">
                <template #default="scope">
                    <span v-if="scope.row.isAdmin === 1">
                        <el-tag type="danger">管理员</el-tag>
                    </span>
                    <span v-else>普通用户</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">

                <template #default="scope">
                    <el-button type="primary" @click="openUpdataDialog(scope.row)">修改</el-button>
                    <el-button type="danger" @click="openDeleteDialog(scope.row.id)">删除</el-button>
                </template>

            </el-table-column>

        </el-table>
        <Page @change="pageChange" :pageNum="pageNum" :pageSize="pageSize" :total="total" v-if="total > 10" />
    </div>
    <!-- 修改对话框 -->
    <el-dialog v-model="updataDialog" title="修改用户信息" width="500">
        <template #footer>
            <el-form :model="updataForm" label-width="auto" style="max-width: 600px" ref="updataFormRef"
                :rules="addRules">
                <el-form-item label="姓名" prop="username" required>
                    <el-input v-model="updataForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password" required>
                    <el-input v-model="updataForm.password" />
                </el-form-item>
                <el-form-item label="电话" prop="phone" required>
                    <el-input v-model="updataForm.phone" />
                </el-form-item>
                <el-form-item label="身份" prop="isAdmin" required>
                    <el-select v-model="updataForm.isAdmin" placeholder="请选择身份">
                        <el-option label="管理员" :value="1" />
                        <el-option label="普通用户" :value="0" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="outUpdataDialog">取消</el-button>
                <el-button type="primary" @click="updataUserRequest">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog v-model="addDialog" title="添加用户信息" width="500">
        <template #footer>
            <el-form :model="addForm" label-width="auto" style="max-width: 600px" :rules="addRules" ref="addFormRef">
                <el-form-item label="姓名" required prop="username">
                    <el-input v-model="addForm.username" />
                </el-form-item>
                <el-form-item label="密码" required prop="password">
                    <el-input v-model="addForm.password" />
                </el-form-item>
                <el-form-item label="电话" required prop="phone">
                    <el-input v-model="addForm.phone" />
                </el-form-item>
                <el-form-item label="身份" required prop="isAdmin">
                    <el-select v-model="addForm.isAdmin" placeholder="请选择身份">
                        <el-option label="管理员" value="1" />
                        <el-option label="普通用户" value="0" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="outAddDialog">取消</el-button>
                <el-button type="primary" @click="addUserRequest()">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog v-model="deleletDialog" title="删除用户信息" width="500">
        <template #footer>
            <el-button @click="deleletDialog = false">取消</el-button>
            <el-button type="primary" @click="deleletUserRequest()">
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped></style>